<template>
	<view class="level-page">
		<lexiconNavVue title="积分段位" />
		<view class="top-section">
			<view class="top-section-bg">
				<view class="top-title">
					我的段位｜My Ranking Level
				</view>
				<view class="card">
					<view class="avatar">
						<image class="img" src="../../../../static/image/score/level1.png" mode="aspectFit"></image>
					</view>
					<view class="user-info">
						<view class="user-info-name">战神</view>
						<view class="user-info-level">积分10000</view>
					</view>
				</view>
				<view class="progress">
					<view class="progress-inner"></view>
				</view>
				<view class="progress-txt">300/1000</view>
			</view>
			<view class="section-top"></view>
		</view>
		<view class="main-box">
			<view class="main-box-bg">
				<view class="tabs">
					<view class="tab-item" :class="activeTab === 0 ? 'tab-item-active' : ''" @click="activeTab = 0">积分获取</view>
					<view class="tab-item" :class="activeTab === 1 ? 'tab-item-active' : ''" @click="activeTab = 1">段位一览</view>
				</view>
				<view>
					<jfhq v-if="activeTab === 0"></jfhq>
					<dwyl v-if="activeTab === 1"></dwyl>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import jfhq from './jfhq.vue'
	import dwyl from './dwyl.vue'
	export default {
		components: {
			jfhq, dwyl
		},
		data() {
			return {
				activeTab: 0
			};
		}
	}
</script>

<style lang="less">
	.level-page{
		height: 100vh;
		background-color: #fff8e1;
		overflow-x: hidden;
		overflow-y: auto;
	}
	.top-section {
		background: linear-gradient(to bottom, #130e00 0%, #373632 100%);
		height: 200px;
		position: relative;
		.section-top{
			position: absolute;
			bottom: -2px;
			left: 0;
			right: 0;
			width: 100%;
			height: 30px;
			background-color: #fff8e1;
			border-radius: 30px 30px 0 0;
		}
	}

	.top-section-bg {
		background-image: url(../../../../static/image/homePage/diwen.png);
		background-size: cover;
		width: 100%;
		height: 100%;

		.setting {
			padding-right: 24px;
			text-align: right;
			padding-top: 6px;

			.icon {
				width: 32px;
				height: 32px;
				margin-left: 10px;
			}
		}
	}

	.top-title {
		font-family: hzgb;
		font-size: 14px;
		color: #fff;
		padding: 18px 24px;
		&::after{
			content: '';
			display: block;
			width: 136px;
			height: 3px;
			border-radius: 3px;
			background-color: #ffd52e;
			margin-top: 2px;
		}
	}
	
	.card {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 0 24px;
		box-sizing: border-box;
		margin-bottom: 4px;
	
		.user-info-name {
			font-size: 20px;
			font-family: hzgb;
			margin-bottom: 5px;
			background-image: -webkit-linear-gradient(bottom, #d9b059, #f5ea90);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	
		.user-info-level {
			font-size: 12px;
			font-family: hzgb;
			color: #000;
			padding: 4px 20px;
			background: linear-gradient(to top, #fff497 0%, #ffd16b 100%);
			border-radius: 12px;
			display: inline-block;
		}
	
		.avatar {
			// width: 66px;
			// height: 66px;
			// background-color: #fff;
			border-radius: 66px;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 20px;
	
			.img {
				width: 66px;
				height: 66px;
			}
		}
	}
	.progress{
		margin: 0 24px;
		height: 10px;
		border-radius: 10px;
		background: linear-gradient(to bottom, #959494, #c2c2c2);
		.progress-inner{
			width: 30%;
			height: 10px;
			border-radius: 10px;
			background: linear-gradient(to bottom, #ffd16b, #fff497);
		}
	}
	.progress-txt{
		color: #fff;
		font-size: 12px;
		text-align: right;
		margin-right: 24px;
	}
	.tabs{
		margin-bottom: 24px;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.tab-item{
			width: 120px;
			height: 28px;
			font-family: hzgb;
			font-size: 14px;
			color: #fff;
			text-align: center;
			line-height: 28px;
			border-radius: 28px;
			background: linear-gradient(to bottom, #130e00, #373632);
			box-shadow: 0 6px 0 0 #9b8b6f;
		}
		.tab-item-active{
			background: linear-gradient(to bottom, #ffd16b, #fff497);
			box-shadow: 0 6px 0 0 #d9b059;
			color: #000;
		}
	}
	.main-box{
		background: linear-gradient(to bottom, #130e00 0%, #373632 100%);
		margin: 14px;
		border-radius: 20px;
		position: relative;
		top: -24px;
		.main-box-bg{
			background-image: url(../../../../static/image/homePage/diwen.png);
			background-size: 100% auto;
			background-repeat: repeat-y;
			width: 100%;
			height: 100%;
			padding: 20px;
		}
	}
</style>
